<template>
  <div class="chat-container" style="margin:5px;">
    <!-- 聊天记录区域 -->
    <div class="chat-box">
      <div class="watermark">AI</div>
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div v-if="message.sender === 'AI'" class="ai-message">
          <div class="ai-content">
            <span class="ai-label">AI:</span>
            <div class="answer">{{ message.content }}</div>
          </div>
        </div>
        <div v-else-if="message.sender === 'Admin'" class="user-message">
          <div class="ask">{{ message.content }}</div>
          <div class="avatar-wrapper">
            <img :src="userStore.avatar" class="user-avatar" />
            <span class="user-nickname"> {{ userStore.nickName }} </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入框和提问按钮 -->
    <div class="input-area">
      <el-input
          v-model="inputMessage"
          placeholder="写下你的问题"
          maxlength="200"
          show-word-limit
          @keyup.enter.native="sendChat"
          style="width:50%;"
      />
      <el-button @click="sendChat">提问</el-button>
    </div>
  </div>
</template>

<script>
import { getAiChatResponse } from '@/api/ai/chat'
import useUserStore from '@/store/modules/user'
export default {
  data() {
    return {
      userStore : useUserStore(),
      inputMessage: '',
      messages: [] // 用于存储聊天记录
    }
  },
  methods: {
    async sendChat() {
      try {
        const trimmedMessage = this.inputMessage.trim();
        if (!trimmedMessage) {
          return; // 如果输入为空，不发送
        }
        // 添加用户（Admin）的消息到聊天记录
        this.messages.push({ sender: 'Admin', content: trimmedMessage });
        const result = await getAiChatResponse(trimmedMessage);
        const aiResponse = result.msg || '没有返回内容';
        // 添加 AI 的消息到聊天记录
        this.messages.push({ sender: 'AI', content: aiResponse });
        // 清空输入框
        this.inputMessage = '';
      } catch (error) {
        console.error('AI 聊天请求失败:', error);
        this.messages.push({ sender: 'AI', content: '请求失败，请重试' });
      }
    }
  }
}
</script>

<style scoped>
.chat-container {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  max-width: 100%;
  margin: 0 auto;
}

.chat-box {
  position: relative;
  height: 79vh;
  overflow-y: auto;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.watermark {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: rgba(0, 0, 0, 0.1); /* 半透明颜色 */
  pointer-events: none; /* 防止水印干扰点击事件 */
  z-index: 0; /* 确保水印在内容之下 */
}
.ai-content {
  display: flex;
  align-items: flex-start; /* 垂直对齐顶部 */
}

.ai-label {
  margin-right: 5px; /* 根据需要调整间距 */
  align-self: flex-start; /* 确保标签在顶部 */
}

.answer {
  display: inline-block;
  white-space: pre-wrap; /* 保留换行符并允许自动换行 */
  word-wrap: break-word; /* 长单词或 URL 自动换行 */
  margin: 10px 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.ask {
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  padding: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
}
.avatar-wrapper {
  margin-top: 10px;
  right: 5px;
  position: relative;

  .user-avatar {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .user-nickname{
    position: relative;
    left: 5px;
    bottom: 10px;
    font-size: 14px;
    font-weight: bold;
  }

  i {
    cursor: pointer;
    position: absolute;
    right: -20px;
    top: 25px;
    font-size: 12px;
  }
}
.message {
  margin: 5px 0;
}

.ai-message {
  text-align: left;
}

.user-message {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 右对齐 */
  margin-right: 20px;
}

.input-area {
  display: flex;
  margin-top: 10px;
  justify-content: center;
}

.el-input {
  margin-right: 10px;
}
</style>
